﻿
<div >

         <!-- progress bar !-->
    <div class="progress progress-striped active" data-ng-show="isBusy" >
         <div style="width: 100%" class="progress-bar"></div>
    </div>

    <!-- no results warning!-->
    <div class="row" data-ng-show="searchWasEmpty">
        <div class="col-md-12">
             <div class="alert alert-warning">
                <p>We found 0 results. <a class="alert-link" href="#/advancedSearch" data-ng-click="reload()">Maybe try more advanced query?</a>.</p>
             </div>   
        </div> 
    </div>
    
    <!-- search failed alert!-->
    <div class="row" data-ng-show="searchFailed">
        <div class="col-md-8">
            <div class="alert alert-danger alert-dismissable">
                <p>
                   Oh snap! There was some error with search service. <strong>Plaese try again!</strong>
                </p>
            </div>                 
        </div>
    </div>
 
    <!-- too many results warning!-->
    <div class="row" data-ng-show="searchWasTooMany">
        <div class="col-md-12">
            <div class="alert alert-warning">
                <button data-dismiss="alert" class="close" type="button">×</button>
                We found over 100 items! <a class="alert-link" href="#/advancedSearch" >Maybe try more detaild query to narrow your results?</a>
            </div>   
        </div>      
    </div>

     <!-- search form !-->
    <div class="panel panel-default" data-ng-hide="data.length > 0">
        <div class="panel-heading">
            <span class="icon-stack">
                <i class="icon-search" ></i>
            </span>Enter your search
        </div>
        <div class="panel-body">
            <form role="form" data-ng-submit="search(searchModel, 1)" >
                  <div class="form-group">
                        <label for="name">Name or Keywords</label>
                        <input type="text" placeholder="e.g. Scott Scale, Niebieski, aluminium" id="name" class="form-control" required="required" pattern=".{3,}" title="3 characters minimum" data-ng-model="searchModel.name">
                    </div>

                    <div class="form-group pull-right">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <span class="icon-stack">
                                    <i class="icon-stack-base "></i>
                                    <i class="icon-search"></i>
                                </span>Search
                            </button>
                     </div> 
            </form>
        </div>
    </div>

    <!-- search bikes results !-->
    <div class="row" data-ng-show="data.length > 0">
        <div class="col-md-12">    
            <div class="row">
                <div class="col-md-8" >
                    <div class="alert alert-dismissable alert-success" data-ng-hide="searchWasTooMany">
                        <button data-dismiss="alert" class="close" type="button">×</button>
                        We have found <strong> {{ dataCount }} </strong> items!  <a class="alert-link" href="#/advancedSearch" data-ng-click="reload()"  >Search again?</a>.
                        
                    </div>
                </div>             
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 thumbnail-border" data-ng-repeat="i in data">
                <div class="thumbnail">
                    
                    <div id="{{ i.Id }}" style="display:none">
                        <img  data-ng-src="{{ i.PhotoUrl }}" alt="No Image found" >
                        <p>{{ i.Name }}</p>
                    </div>

                    <!--  <a class="fancybox" href="#{{ i.Id }}" data-ng-click="fancybox(this);">-->
 
                    <a class="fancybox" href="#{{ i.Id }}" >
                        <img alt="140x140" data-ng-src="{{ i.ThumbnailUrl }}" style="width: 140px; height: 140px;"> 
                    </a>
                    <div class="caption">
                        <div class="caption-name">
                            <p> {{ i.Name }} </p>
                        </div>
                        <span class="icon-stack"><i class="icon-globe"></i></span> {{ i.AuctionPlatform }} <br/>
                        <span class="icon-stack"><i class="icon-calendar"></i></span> {{ i.DateOfCompletion }}
                        <hr />
                        <div class="btn-group-sm ">
                            <button class="btn btn-with-tooltip" type="button" data-original-title="Details" data-toggle="modal" data-target="#detailsModal{{ i.Id }}"><i class="icon-reorder"></i> </button>
                            <button class="btn btn-with-tooltip" type="button" data-original-title="Zoom" data-ng-click="fancybox(i.Id)"><i class="icon-zoom-in"></i></button>
                            <button class="btn btn-with-tooltip" type="button" data-original-title="Navigate to auction" onclick="window.open('{{ i.Url }}','_blank')" ><i class="icon-eye-open"></i> </button>
                        </div>  
                        <!-- Modal -->
                        <div class="modal fade" id="detailsModal{{ i.Id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h5 class="modal-title"><strong>{{ i.Name }}</strong></h5>
                                    </div>
                                    <div class="modal-body">
                                        <p>Price: <strong>{{ i.Price }}</strong></p>
                                        <p>Location: <strong>{{ i.City }}</strong></p>
                                        <p>Date of completion: <strong>{{ i.DateOfCompletion }}</strong></p>
                                        <p>Status: <strong>{{i.IsActive}}</strong> </p>
                                        <p>Number of bids: <strong>{{ i.NumberOfBids}}</strong></p>
                                        <p>Auction platform: <strong>{{ i.AuctionPlatform }}</strong></p>
                                        <!--<hr/>
                                            <span data-ng-bind-html-unsafe= "i.Description"></span>
                                            -->

                                    </div>
                                    <div class="modal-footer">
                                        
                                        <!-- <button class="btn btn-with-tooltip" type="button" data-original-title="Navigate to auction" data-position="top" onclick="window.open('{{ i.Url }}','_blank')"><i class="icon-eye-open"></i> </button>-->
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                        </div>
                    </div>
                </div>        
            </div> 
        </div> 
    </div>

      <!--pagination -->
    <div class="row">
        <div class="btn-toolbar" data-ng-show="totalPages > 1">
            <div class="btn-group-wrap">
                <div class="btn-group btn-group-pagination">
                    <button class="btn btn-default" type="button" data-ng-disabled="i + 1 == pageNumber" data-ng-repeat="i in [] | range : totalPages" data-ng-click="selectPage(i + 1)">{{ i + 1 }}</button>
                </div>
            </div>
        </div>
    </div>

</div>
